<template>
  <a-modal
    v-model="modalVisible"
    title="多标段设置"
    width="1000px"
    :maskClosable="false"
    :destroyOnClose="true"
  >
    <a-form layout="inline">
      <a-form-item label="项目名称" style="width: 60%;">
        <a-input autocomplete="off" disabled :default-value="formData.name" />
      </a-form-item>
      <a-form-item label="类型" style="width: 30%;">
        <a-select disabled :default-value="formData.belongType" style="width: 100%;">
          <span slot="suffixIcon"></span>
          <a-select-option v-for="item in projectBelongs" :key="item.key" :value="item.key" :title="item.title">{{item.title}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="添加标段项目" style="width: 100%;">
        <a-button type="primary" size="small" @click="onAdd">添加行</a-button>
        <a-table
          bordered
          rowKey="sectionNum"
          :scroll="{ y: 500 }"
          :columns="[
            { title: '标段序号', dataIndex: 'sectionNum', width: 100, customRender: (text) => `标段${text + 1}` },
            { title: '标段名称', dataIndex: 'sectionName', scopedSlots: { customRender: 'sectionName' } },
            { title: '操作', width: 100, scopedSlots: { customRender: 'operation' } },
          ]"
          :data-source="formData.sections"
          :pagination="false"
          style="width: 100%;"
        >
          <template slot="sectionName" slot-scope="text, record">
            <base-input v-model="record.sectionName" class="requiredFormItem" placeholder="请输入" />
          </template>
          <template slot="operation" slot-scope="text, record, index">
            <a-popconfirm title="确定要删除?" @confirm="onDelete(record, index)">
              <a-button type="link" size="small">删除</a-button>
            </a-popconfirm>
          </template>
        </a-table>
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button type="primary" :loading="confirmLoading" @click="handleOk">提交</a-button>
      <a-button type="default" @click="handleCancel">关闭</a-button>
    </template>
  </a-modal>
</template>

<script>
import { projectBelongs } from './eum.js'
import { setSection } from '@/api/system/system'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultData: {
      type: Object,
      default: {}
    },
  },
  data(){
    return {
      projectBelongs,
      formData: {
        name: '',
        projectId: '',
        sections: [],
      },
      confirmLoading: false,
    }
  },
  computed: {
    modalVisible: {
      get: function(){
        if(this.visible){
          this.init()
        }
        return this.visible
      },
      set: function(val){
        this.$emit('update:visible', val)
      }
    },
  },
  methods: {
    init(){
      const { name, id, children } = this.defaultData
      this.formData = {
        projectId: id,
        name,
        belongType: 2,
        sections: (children || []).filter(item => item.type == 5).map((item, index) => ({
          sectionNum: index,
          sectionName: item.name
        })),
      }
    },
    onAdd(){
      this.formData.sections = [
        ...this.formData.sections,
        { sectionNum: this.formData.sections.length, sectionName: '' }
      ]
    },
    onDelete(record){
      this.formData.sections = this.formData.sections
        .filter(item => item.sectionNum !== record.sectionNum)
        .map((item, index) => ({ ...item, sectionNum: index }))
    },
    handleOk(){
      const { sections, projectId } = this.formData
      if(sections.some(item => !item.sectionName)){
        this.$message.error('标段名称不能为空！')
        return
      }
      this.confirmLoading = true
      setSection({
        projectId,
        list: sections
      }).then(res => {
        this.confirmLoading = false
        if(res.data.code == 200){
          this.$message.success('保存成功！')
        }
        this.modalVisible = false
        this.$emit('submit')
      }).catch(err => {
        this.confirmLoading = false
      })
    },
    handleCancel(){
      this.modalVisible = false
    },
  }
}
</script>